<!-- 我的收藏 -->
<template>
	<view class="page">
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="handleNavToGoodsDetail()">
				<image class="pic" :src="'/pagesC-my/static/images/will-delete/3.png'" mode="aspectFit"></image>
				<view class="content">
					<view class="header">
						<text class="name">舒绝杀蚁饵剂红火蚁一窝端</text>
					</view>
					<view class="footer">
						<text class="price">￥9.9</text>
						<button class="delete-btn btn-transition-scale9" @click.stop="handleDelete(index)">取消</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<c-empty-data v-if="!list.length && !loadingState.default" empty-text="您还没有收藏任何商品哦~"></c-empty-data>
		<!-- loading -->
		<view style="margin-top: 20rpx;">
			<c-loading :loadingState="loadingState"></c-loading>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const params = ref({
		limit: 20,
		page: 1,
	});
	const total = ref(0);
	const list = ref([{}, {}]);

	const loadingState = ref({
		default: false,
		loading: false,
		stop: true,
		pullup: false,
	});

	const handleNavToGoodsDetail = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/goods-detail/index'
		});
	}

	const handleDelete = (index) => {
		uni.showModal({
			title: '提示',
			content: '您确定要取消该商品收藏吗?',
			success: (res) => {
				if (!res.confirm) return;
				list.value.splice(index, 1);
				if (!list.value.length) loadingState.value.stop = false;
			}
		})
	}
</script>

<style lang="scss" scoped>
	.list {
		background-color: white;

		&-item {
			position: relative;
			display: flex;
			padding: 20rpx 20rpx 20rpx 30rpx;
			
			&:active {
				background-color: #fafafa;
			}

			&::after {
				position: absolute;
				right: 0;
				bottom: 0;
				display: block;
				content: '';
				width: calc(100% - 30rpx);
				height: 1px;
				background-color: #e5e5e5;
				transform: scaleY(0.5);
			}

			&:last-child::after {
				display: none;
			}

			.pic {
				flex-shrink: 0;
				width: 128rpx;
				height: 128rpx;
				background-color: #F7F7F7;
				border-radius: 8rpx;
				margin-left: 6rpx;
			}

			.content {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 128rpx;
				padding-left: 30rpx;

				.header {
					.name {
						flex-shrink: 0;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 1.5;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 28rpx;
						color: #FE3333;
					}

					.delete-btn {
						font-size: 24rpx;
						color: #222;
						padding: 6rpx 40rpx;

						&::after {
							display: block;
							border: 1px solid #999;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>